<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 绝对定位：
            设置position的值为absolute

            绝对定位会完全脱离文档里 不占位置
            开启了绝对定位不设置偏移量不会有任何效果
            绝对定位在祖先元素没有定位时相对于浏览器窗口进行定位的
            但是只要祖先元素开启定位 相对于离他最近的开启了定位的元素进行定位



        
        */
        .box1 {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            top: 0px;
            left: 0px;
        }

        .box2 {
            width: 100px;
            height: 100px;
            background-color: green;
        }

        .parent {
            width: 800px;
            height: 400px;
            background-color: pink;
            /* 给父元素开启定位 */
            position: relative;

        }

        .patent1 {
            width: 600px;
            height: 300px;
            background-color: green;
            /* 给父元素开启定位 */
            position: relative;
            left: 100px;
            top: 50px
        }
    </style>
</head>

<body>
    <div class="parent">
        <div class="patent1">
            <div class="box1"></div>
            <div class="box2"></div>
        </div>
    </div>


    <!-- 行级元素开启绝对定位会编程块级元素 -->
    <span style="width: 100px; height: 100px; background-color: red; position: absolute;">你好</span>
    <hr>
    <!-- 块级元素开启绝对定位会让默认高度和宽度都被内容撑开 -->
    <div style="background-color: pink; position: absolute;">5555</div>
</body>


<!-- 总结：
通常绝对定位不会占位置会导致下方元素上移出现问题或页面混乱 
建议使用父元素相对定位不设置偏移量+子元素绝对定位来做定位操作


-->
</html>